<template>
    <div style="height:100vh">
        <div class="head">
            <div class="seekersName">{{ Seekers.seekersName }}</div>
            <el-button type="text" icon="el-icon-edit" class="modifyInfo" @click="dialogFormVisible = true">修改信息</el-button>

            <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
                <el-form :model="Seekers" ref="form">
                    <el-form-item label="姓名" prop="seekersName">
                        <el-input v-model="Seekers.seekersName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="Seekers.age" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学历" prop="education">
                        <el-input v-model="Seekers.education" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="Seekers.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="专业" prop="profession">
                        <el-input v-model="Seekers.profession" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input v-model="Seekers.phone" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit()
                    dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <div class="info">

            <div class="age">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dangao"></use>
                </svg>
                生日：{{ Seekers.age }}
            </div>
            <div class="education">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xueshimao"></use>
                </svg>
                学历：{{ Seekers.education }}
            </div>
            <div class="profession">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tushu"></use>
                </svg>
                专业：{{ Seekers.profession }}
            </div>
            <div class="phone">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dianhua"></use>
                </svg>
                电话：{{ Seekers.phone }}
            </div>
            <div class="email">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youxiang"></use>
                </svg>
                邮箱：{{ Seekers.email }}
            </div>
        </div>

    </div>
</template>
<script>
import axios from 'D:\\job_management\\src\\axiosConfig.js';
export default {
    data() {
        return {
            Seekers: {
                account: 2713,
                seekersName: '张三',
                sex: '男',
                age: 20,
                education: '本科',
                email: '271375@qq.com',
                profession: '计算机科学与技术',
                phone: '18766789979'
            },
            dialogFormVisible: false,
        }
    },
    mounted() {
        axios.get(`/seekers/infomation/${this.$store.state.account}`,
            {


            },
        )
            .then(response => {
                this.$data.Seekers = response.data.data
            })
            .catch(error => {
                console.log(error);
            })
    },
    methods: {
        submit() {
            axios.post('seekers/infomation/update', this.Seekers
            ).then(res => {
                console.log(res);
            })

        }
    }
}
</script>
<style scoped>
.icon {
    width: 4em;
    height: 4em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 7px;
}

.head {
    position: relative;
    width: 75%;
    height: 90px;
    background-color: #fff;
    margin-top: 20px;
    margin-left: 200px;
    border-bottom: 1px solid grey;
}

.seekersName {
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 6vh;
    left: 10vw;
    transform: translate(-50%, -50%);

}

.modifyInfo {
    position: absolute;
    top: 6vh;
    right: 9vw;
    transform: translate(-50%, -50%);
    font-size: 20px;
}

.info {

    position: relative;
    width: 75%;
    height: 150px;
    background-color: #fff;
    margin-left: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.info>* {
    position: absolute;
}

.education,
.phone {
    font-size: 20px;
    left: 35vw;
}

.age,
.profession,
.email {
    font-size: 20px;
}

.age,
.education {
    top: 1vh;
}

.profession,
.phone {
    top: 7vh;
}

.email {
    top: 13vh;
}
</style>